<template>
	<view class="login">
		<van-dialog id="van-dialog" />
		<view class="change-login">
			<text @click="changeTabs1" class="change-one" :class="cur == 1 ?'change-click' : 'change-one'">验证码登录</text>
			<text @click="changeTabs2" class="change-two" :class="cur == 2 ?'change-click change-two' : 'change-two'">账号登录</text>
		</view>
		<view class="codeLogin" v-if="cur == 1">
			<view class="phone">
				<view class="one">
					<image class="img" src="../../static/phone.jpg" />
					手机号
				</view>
				<view class="two">
					<input v-model="user.phone" placeholder="请输入手机号" type="number" />
				</view>
			</view>
			<view class="code">
				<view class="one">
					<image class="img" src="../../static/anquan.jpg" />
					验证码
				</view>
				<view class="two">
					<input v-model="user.verificationCode" placeholder="请输入验证码" type="number" />
					<text v-if="!temp" class="getcode" @click="getNote">获取验证码</text>
					<view v-else style="color: #007AFF;">{{time}}s</view>
				</view>
			</view>
		</view>
		<view class="pwdLogin" v-else>
			<view class="phone">
				<view class="one">
					<image class="phone-image" src="../../static/phone.jpg" />
					手机号
				</view>
				<view class="two">
					<input v-model="user.phone" placeholder="请输入手机号" type="number" />
				</view>
			</view>
			<view class="code">
				<view class="one">
					<image class="clock-image" src="../../static/密码.png" />
					账号密码
				</view>
				<view class="pwd">
					<view class="two">
						<input v-if="reveal" v-model="user.password" placeholder="请输入密码" type="password" />
						<input v-else v-model="user.password" placeholder="请输入密码" type="text" />

					</view>
					<view @click="showPwd" class="icon">
						<image v-if="reveal" class="eye-image" src="../../static/不显示.png"></image>
						<image v-else class="eyes-image" src="../../static/眼睛.png"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="loginBtn" @click="login">
			登录
		</view>
		<view :style="cur==1 ? 'opacity:0;':''" class="forget">
			<view>
				忘记密码，
			</view>
			<view class="find" @click="find">
				立即找回
			</view>
		</view>
		<view class="rest-login">
			<view class="head">
				<view class="wire-right"></view>
				<view class="title">其他登录方式</view>
				<view class="wire-left"></view>
			</view>
			<view class="way">
				<view @click="getUserInfo" class="wechat">
					<view class="wechat-frame">
						<image class="wechat-image" src="../../static/微信.png"></image>
					</view>
				</view>
				<view v-if="swi == 'ios'" class="phone">
					<view class="iph-frame">
						<image class="iph-image" src="../../static/手机.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Dialog from '../../wxcomponents/vant-weapp/dialog/dialog'
	import {
		useLogin,
		noteLogin
	} from "../../api/login.js"
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				swi: null,
				time: 60,
				temp: false,
				cur: 1,
				phone: "",
				password: "",
				code: "",
				reveal: true,
				user: {
					phone: "",
					password: "",
					verificationCode: ""
				}
			}
		},
		created() {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					this.swi = "android"
					break;
				case 'ios':
					this.swi = "ios"
					break;
				default:
					this.swi = "test"
					break;
			}

		},
		onLoad(options) {
			if (options.cur) {
				this.cur = options.cur ? options.cur : 1
			}
		},
		methods: {
			/* tabs栏切换登录方式 */
			changeTabs1() {
				this.cur = 1,
					console.log('cur为1')
			},
			changeTabs2() {
				this.cur = 2,
					console.log('cur为2')
			},
			showPwd() {
				this.reveal = this.reveal ? false : true
			},
			getNote() {
				if (this.user.phone && this.user.phone.trim().length == 11) {
					let self = this
					noteLogin(this.user).then(res => {
						uni.hideLoading();
						self.temp = true
						let timekeeping = setInterval(
							function() {
								self.time -= 1
								if (self.time == 0) {
									self.time = 60
									self.temp = false
									window.clearInterval(timekeeping)
								}
							}, 1000)
					})
				} else {
					Dialog({
						title: "系统提示",
						message: "请填写正确手机号",
					})
				}

			},

			find() {
				uni.navigateTo({
					url: 'find'
				})
			},
			login() {
				if (!this.user.phone || this.user.phone.trim().length != 11) {
					Dialog({
						title: "系统提示",
						message: "请填写正确手机号",
					})
				}
				if (this.cur == 1 && !this.user.verificationCode || this.user.verificationCode.trim().length < 4) {
					Dialog({
						title: "系统提示",
						message: "请填写正确验证码",
					})
				}
				if (this.cur == 2 && !this.user.password || this.user.password.trim().length < 6) {
					Dialog({
						title: "系统提示",
						message: "请填写正确密码",
					})
				} else {
					if (this.cur = 2) {
						this.user.account = this.user.phone
						useLogin(this.user).then(res => {
							uni.hideLoading();
							if (res.success) {
								uni.navigateTo({
									url: "../index/index"
								})
							} else {
								Dialog({
									title: "系统提示",
									message: res.message,
								})
							}
						})
					} else {

					}
				}
			},
			...mapMutations(["login"]),
			getUserInfo() {
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider);
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log('-------获取openid(unionid)-----');
									console.log(JSON.stringify(loginRes));
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											console.log('-------获取微信用户所有-----');
											console.log(JSON.stringify(infoRes.userInfo));
										}
									});
								}
							});
						}
					}
				});
			}
		},
		onNavigationBarButtonTap(val) {
			uni.switchTab({
				url: '../index/index'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.change-login {
			width: 90%;
			margin-top: 100rpx;
			height: 60rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.change-one {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 45%;
				float: left;
				width: 45%;
				height: 60rpx;
				background: #f4f3f8;
				color: #acb1b4;
				border-radius: 30rpx;
			}

			.change-two {
				margin-left: -40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				float: right;
				width: 45%;
				height: 60rpx;
				background: #f4f3f8;
				color: #acb1b4;
				border-radius: 30rpx;
			}

			.change-click {
				z-index: 999;
				color: #fff;
				background: #0497ff;
			}
		}

		.codeLogin {
			margin-top: 100rpx;
			width: 79%;

			.phone {
				.one {
					display: flex;
					align-items: center;

					.img {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
				}

				.two {
					margin-top: 20rpx;

					input {
						border-bottom: 1px solid #c2c2c2;
					}
				}
			}

			.code {
				margin-top: 40rpx;

				.one {
					display: flex;
					align-items: center;

					.img {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
				}

				.two {
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					input {
						border-bottom: 1px solid #c2c2c2;
					}

					.getcode {
						line-height: 38rpx;
						color: #0497ff;
					}

				}
			}

		}

		.loginBtn {
			margin-top: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			width: 320rpx;
			height: 80rpx;
			background-color: #0497ff;
			border-radius: 18rpx;
		}

		.pwdLogin {
			margin-top: 100rpx;
			width: 79vw;

			.phone {
				.one {
					display: flex;
					align-items: center;

					.phone-image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
				}

				.two {
					margin-top: 20rpx;

					input {
						border-bottom: 1px solid #c2c2c2;
					}
				}
			}

			.code {
				margin-top: 40rpx;

				.one {
					display: flex;
					align-items: center;

					.clock-image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
				}

				.pwd {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;

					.two {
						margin-top: 20rpx;

						input {
							width: 80vw;
							border-bottom: 1px solid #c2c2c2;
						}
					}

					.icon {
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						top: 0;
						right: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 10;
					}

					.eye-image {
						width: 30rpx;
						height: 30rpx;
					}

					.eyes-image {
						width: 30rpx;
						height: 30rpx;
					}
				}

			}


		}

		.forget {
			display: flex;
			margin-bottom: 50rpx;

			.find {
				color: #0497ff;
			}
		}

		.rest-login {

			.head {
				display: flex;
				align-items: center;

				.wire-right,
				.wire-left {
					width: 36vw;
					height: 0;
					border-bottom: solid 2rpx #c5c5c5;
				}

				.title {
					color: #939393;
					font-size: 32rpx;
				}
			}

		}

		.way {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;

			.wechat {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 120rpx;
				font-size: 32rpx;

				.wechat-frame {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 120rpx;
					height: 120rpx;
				}

				.wechat-image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 99rpx;
				}
			}

			.phone {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 120rpx;
				font-size: 32rpx;

				.iph-frame {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 120rpx;
					height: 120rpx;
				}

				.iph-image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 99rpx;
				}
			}
		}
	}
</style>
